<template>
  <div class="Main">
    <div class="MainTitle">品牌列表</div>
    <div class="MianContent">
      <a-button
        type="primary"
        style="margin-bottom: 20px"
        size="large"
        @click="modalShow = true"
        >+ 新增品牌</a-button
      >
      <a-tabs v-model="current" @change="selectTabs">
        <a-tab-pane key="1" tab="医药商品"></a-tab-pane>
        <!-- <a-tab-pane key="2" tab="普通商品"></a-tab-pane> -->
      </a-tabs>
      <a-table
        :columns="listfields"
        :data-source="listData"
        :bordered="true"
        :pagination="false"
      >
        <div slot="action" slot-scope="row, index">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-around;
              margin-bottom: 6px;
            "
          >
            <a-button type="primary" size="small" @click="toEdit(index)"
              >编辑</a-button
            >
            <a-popconfirm
              placement="bottom"
              ok-text="删除"
              cancel-text="取消"
              @confirm="DeleteItem(index)"
            >
              <template slot="title">
                <p>警告</p>
                <p>此操作将永久删除该文件, 是否继续?</p>
              </template>
              <a-button type="danger" size="small">删除</a-button>
            </a-popconfirm>
          </div>
        </div>
        <div slot="logo" slot-scope="row, index">
          <img
            style="width: 50px; height: 50px"
            @click="seeImg(index)"
            :src="row"
            alt=""
          />
        </div>
      </a-table>
      <Pagination
        :total="total"
        v-model="pageno"
        :pageSize.sync="pagesize"
        @change="handlePageChange"
        @onShowSizeChange="onShowSizeChange"
      ></Pagination>
      <a-modal
        title="添加品牌"
        v-model="modalShow"
        centered
        ok-text="确认"
        :maskClosable="false" 
        cancel-text="取消"
        @cancel="cancelBtn"
        @ok="modalSubmit"
        :width="700"
      >
        <div style="padding-left: 10px">
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item label="品牌名称" prop="title">
              <a-input
                v-model="form.title"
                placeholder="请输入名称"
                allowClear
              />
            </a-form-model-item>
            <a-form-model-item label="排序" prop="sort">
              <a-input
                v-model="form.sort"
                :min="0"
                type="number"
                allowClear
                placeholder="请输入优先级"
              />
            </a-form-model-item>
            <a-form-model-item label="类型" prop="sort">
              <a-radio-group name="radioGroup" v-model="form.type">
                <a-radio :value="1"> 医药商品 </a-radio>
                <!-- <a-radio :value="2"> 普通商品 </a-radio> -->
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="ICON图" prop="logo">
              <UploadImage v-if="modalShow" v-model="form.logo" :maxNum="1"></UploadImage>
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-modal>
      <a-modal v-model="LookImages" :footer="null" centered>
        <div style="margin: 10px">
          <img :src="SelectImg" style="width: 100%; height: 100%" />
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import Pagination from "@/components/common/pagination.vue";
import UploadImage from "@/components/common/Upload";
import { ProductBrandIndex } from '@/views/Columns/ProductBrand.js';
import {
  GetProductBrandList,
  GetProductBrandAdd,
  GetProductBrandDel,
  GetProductBrandEdit,
} from "@/api/api.js";
export default {
  name: "list",
  components: {
    Pagination,
    UploadImage,
  },
  data() {
    return {
      modalShow: false,
      pageno: 1, //默认第几页
      pagesize: 10, //一页显示多少条数据
      total: 0, //总数
      listData: [], //表格数据
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      keyword: "",
      listfields:ProductBrandIndex,
      form: {
        title: "",
        sort: "",
        logo: [],
        type: 1
      },
      rules: {
        title: [{ required: true, message: "请输入名称!", trigger: "blur" }],
        sort: [{ required: true, message: "请选择分类类型!", trigger: "blur" }],
        logo: [{ type:'array',required: true, message: '请上品牌icon图', trigger: 'change', }, ],
      },
      LookImages: false,
      SelectImg: "",
      current:'1'
    };
  },
  computed: {
    // ...mapState({
    //   listfields: (state) => state.ProductBrand.fields, //获取table头
    // }),
  },
  mounted() {
    // this.GetFields();
    this.GetList();
  },
  methods: {
    // ...mapActions({
    //   GetFields: "ProductBrand/GetFields", //获取table头
    // }),

    // 查看图片
    seeImg(row) {
      const that = this;
      that.LookImages = true;
      that.SelectImg = row.logo;
    },

    // 选择tabs
    selectTabs(){
      const that = this;
      that.pageno = 1;
      that.pagesize = 10;
      that.GetList()
    },

    // 获取品牌列表
    async GetList() {
      const that = this;
      let params = {
        keyword: that.keyword,
        page: that.pageno,
        pagesize: that.pagesize,
        type: that.current
      };
      let res = await GetProductBrandList(params);
      if (res.data.code == 1) {
        let data = res.data.data;
        data.list.forEach((item) => {
          item.key = item.id;
        });
        that.listData = data.list;
        that.total = data.count;
      } else {
        showError(res.data.msg);
      }
    },
    // 弹出确定
    async modalSubmit() {
      let that = this;
      that.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (!that.form.logo.length) {
            showError("请上传品牌icon图");
            return;
          }
          let params = {
            title: that.form.title,
            sort: that.form.sort,
            logo: that.form.logo[0].url
              ? that.form.logo[0].url
              : that.form.logo[0],
            type:that.form.type
          };
          if (that.form.id) {
            //编辑
            params.id = that.form.id;
            let res = await GetProductBrandEdit(params);
            if (res.data.code == 1) {
              showSuccess("编辑成功");
              that.modalShow = false;
              that.cancelBtn();
              that.GetList();
            } else {
              showError(res.data.msg);
            }
          } else {
            //新增
            let res = await GetProductBrandAdd(params);
            if (res.data.code == 1) {
              showSuccess("添加成功");
              that.modalShow = false;
              that.cancelBtn();
              that.GetList();
            } else {
              showError(res.data.msg);
            }
          }
        }
      });
    },
    // 弹出取消
    cancelBtn() {
      const that = this;
      that.$refs.ruleForm.resetFields();
      that.form.title = "";
      that.form.sort = "";
      that.form.logo = [];
      that.form.id = null;
      that.form.type = 1;
      // that.$refs.uploadImg.clearFile()
      that.modalShow = false;
    },

    // 删除品牌
    async DeleteItem(row) {
      const that = this;
      let res = await GetProductBrandDel({ id: row.id });
      if (res.data.code == 1) {
        showSuccess("删除成功");
        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },
    // 编辑品牌
    toEdit(row) {
      console.log(row);
      const that = this;
      that.form.id = row.id;
      that.form.title = row.title;
      that.form.sort = row.sort;
      that.form.logo = row.logo ? [{ url: row.logo }] : [];
      that.form.type = row.type;
      that.modalShow = true;
    },

    //分页器
    handlePageChange(pageno, pagesize) {
      //点击第几页触发的函数
      this.pageno = pageno;
      this.pagesize = pagesize;
      this.GetList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChange(current, size) {
      //改变每页显示条目数的函数
      //pagesize 变化的回调
      this.pageno = current;
      this.pagesize = size;
      this.GetList(); //这个是向后台请求的数据函数
    },
  },
};
</script>

<style scoped lang="stylus">
.editable-row-operations a {
  margin-right: 12px;
}
.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }
  .MainTitle:before {
    content: '';
    width: 40px;
    height: 12px;
    background: linear-gradient(270deg, rgba(0, 158, 238, 0) 0%, rgba(0, 158, 238, 0.3) 100%);
    position: absolute;
    bottom: 2px;
    left: 0;
  }
  .MianContent {
    padding: 10px 20px 20px 20px;
    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .MainTopActionView {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .MainTopActionOne {
          margin-right: 30px;
          span {
            margin-right: 20px;
          }
        }
        .MainTopActionTwo {
          span {
            margin-right: 20px;
          }
        }
      }
      .MainTopActionThree {
        display: flex;
        align-items: center;
        margin-left: 20px;
      }
    }
  }
}
</style>